<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TalkFun Uploader v1.0.3</title>
    <script src="./cropper/jquery.js"></script>
    <script src="./cropper/webuploader.js"></script>
    <style>
      body {
        background-color: #FFFFFF;
        color: #666666;
        font-family: Helvetica,Arial,sans-serif;
        font-size: 12px;
        padding: 0 10px;
        text-align: left;
      }
      .webuploader-container {
        height: auto;
        position: relative;
        width: 200px;
        height: 40px;
        line-height: 40px;
        margin: 20px 0;
        background: #ccc;
      }
      #xinf {
        display: none;
      }
      .webuploader-pick {
        position: relative;
        /* padding: 10px; */
        /* width: 892px; */
        /* height: 42px; */
        text-align: center;
        overflow: hidden;
        bottom: auto;
        right: auto;
        width: 270px;
        height: 40px;
        border-width: 0px;
        border-radius: 3px;
        background: #1E90FF;
        cursor: pointer; 
        outline: none;
        font-family: "Microsoft YaHei";
        color: white;
        font-size: 17px;
      }
      .webuploader-pick-hover {
        background: #006eda;
      }
      #ctlBtn {
        width: 270px;
        height: 40px;
        border-width: 0px;
        border-radius: 3px;
        background: #1E90FF;
        cursor: pointer; 
        outline: none;
        font-family: "Microsoft YaHei";
        color: white;
        font-size: 17px;
        display: none;
      }
      #ctlBtn:hover {
        background: #5599FF;
      }
      .webuploader-container input {
        height: 40px;
        width: 100%;
        /* width: 300px; */
        border: 0 none;
        /* background: green; */
        cursor: pointer;
        display: block;
        overflow: hidden;
        opacity: 0;
      }
      .file-progress {
        height: 6px;
        width: 100%;
        margin: 20px 0;
        border-radius: 5px;
        background-color: #e0e0e0;
        position: relative;
      }
      .cur-precent {
        position: absolute;
        width: 0%;
        height: 6px;
        top: 0;
        background-color: #58b3ff;
        border-radius: 5px;
      }
      .file-info {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 2px;
      }
      .file-info p {
        padding: 5px 15px;
        font-size: 12px;
        background: #edf7ff;
      }
      .file-info p em{
        padding: 2px 4px;
        font-size: 12px;
        margin-left: 6px;
        border-radius: 4px;
        background:#56d000;
        font-style: normal;
        color: #FFFFFF;
        text-align: center;
      }
      .file-info p:hover {
        background: #dcebf7;
      }
      .tf-uploader-example {
        max-width: 800px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="uploader" class="tf-uploader-example">
        <h1>TalkFun Uploader Demo</h1>
        <!--用来存放文件信息-->
        <div id="detailoffile" class="loader-list"></div>
        <div id="fileInfo" class="file-info"><span>当前文件信息</span></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <p id="xinf">正在处理文件....</p>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
        <div class="file-progress">
          <em class="cur-precent" id="progress"></em>
        </div>
    </div>
    <script>

      /**
       * ## 上传流程说明 ##
       * ========================================
       * 1、配置好getUploadUrlApi，该接口地址为客户获取上传视频地址的接口
       * 2、用户选择文件，通过 fileQueued 事件可以得到视频文件的 md5
       * 3、调用 getUploadUrlApi 传递md5参数，从服务器获取到视频上传接口地址（获取视频地址需要通过服务器端sdk调用videoGetUploadUrl方法），并返回给前端上传组件
       * 4、上传组件开始上传，可以通过uploadProgress事件获取上传进度
       * 5、上传组件上传完成，可以通过uploadSuccess事件获取上传完成的返回数据。上传完成将调用 前端 uploadSuccessCallback 方法，返回视频id、视频标题、视频时长、视频播放地址、视频文件md5等信息
       * 6、在uploadSuccessCallback方法，将接口返回的信息post到客户服务器接口，完成入库
      */

      // 客户获取视频上传地址的接口
      var getUploadUrlApi = '${getUploadUrlApi}'

      // 获取上传 Api
      var getUploadApi = function (md5, callback) {
        // ## 如果需要请求得到一个 => uploadUrl 也可以通过ajax方式实现 ##
        $.ajax({
          url: getUploadUrlApi,
          method: 'GET',
          dataType: 'jsonp',
          cache: true,
          // 参数
          data: {
             md5: md5
            // sub: 'getUploadApi',
            // bid: '10001'
          },
          // 返回值处理
          success: function (res) {
            console.warn('接口数据 ==>', res)
            if (res.code == 0) {
              callback && callback(res)
            }
          },
          // 错误
          error: function () {
            console.error('[Error message] => 获取上传地址错误!')
          }
        })
        // callback && callback(window.uploaderUrl)
      }

      // 上传完成后回调客户服务器接口
      var uploadSuccessCallback = function (res) {
          /**
          * ## res.data => 返回数据结构 ##
          * ============================
          * @videoId => 视频id
          * @status => 视频状态
          * @url => 视频url
          * @duration => 视频时长
          * # 
          */
        console.warn('## 上传完成, 回调数据 ==>', res.data)
        // 将以上返回信息POST到客户服务器接口,进行入库 (参考以下代码)
        // ==========================
        // #### 入库 Post Demo ####
        // ==========================
        // $.ajax({
        //   url: '入库地址',
        //   method: 'POST',
        //   dataType: 'jsonp',
        //   data: {
        //     videoId: res.data.videoId
        //   },
        //   success: function () {
        //     // 入库完成
        //   },
        //   error: function () {
        //     // 错误
        //   }
        // })
      }
      
      // 绑定事件
      var bindUpload = function () {
        $('#ctlBtn').on('click', function () {
          var fileList = uploader.getFiles()
          if (!uploader.options.server) {
            alert('上传地址错误,请设置后再试!')
            return false
          }
          if (fileList && fileList.length > 0) {
            uploader.upload()
          } else {
            alert('请选择视频文件上传')
          }
        })
      }

      // 获取MD5
      var MD5_KEY = null
      var getMD5 = function () {
        return MD5_KEY
      }

      // uploader => 上传
      var uploader = WebUploader.create({
        // 方法
        method: 'POST',
        // 设置文件上传域的name
        fileVal: 'filedata',
        // 文件上传地址
        server: null,
        // 失败重试
        chunkRetry: 10,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
          id: '#picker',
          innerHTML: '请选择视频文件',
          multiple: false
        },
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        // 分片上传
        chunked: true,
        // 默认5M每片
        chunkSize: 5 * 1024 * 1024 
      })
      
      // 文件加入队列前相应
      uploader.on('beforeFileQueued', function (file) {
        uploader.reset()
        $('#xinf').fadeIn()
        $('#ctlBtn').fadeOut(10)
        var fileInfo = file
        var infoDom = $('#fileInfo')
        var p = '<p id="'+ file.id +'">' + ['文件名: ' + file.name, '大小: ' + (file.size / 1000 / 1000).toFixed(2) + ' MB'].join('<br/>') + '</p>'
        infoDom.html(p)
      })

      // 文件加入队列 => 计算文件MD5
      uploader.on('fileQueued', function (file) {
        uploader.md5File(file).then((_md5) => {
          console.warn('md5 checkout ==>', _md5)
          // md5
          MD5_KEY = _md5
          // 上传地址配置
          if (!uploader.options.server) {
            getUploadApi(_md5, function (res) {
              uploader.options.server = res.data.resumeUploadUrl
              uploader.options.formData = {
                md5: _md5,
                fileVal: res.data.field
              }
            })
          } else {
            uploader.options.formData = {
              md5: _md5
            }
          }
          $('#xinf').fadeOut(10)
          $('#ctlBtn').fadeIn()
        })
      })
      
      // 上传前
      uploader.on('uploadBeforeSend', function (file) {
        console.warn('MD5计算 ==> ', MD5_KEY)
        if (!getMD5()) {
          alert('md5为空')
        }
        $('#ctlBtn').off('click')
      })

      // 上传错误
      uploader.on('uploadError', function (res) {
        console.error('上传出错', res)
      })

      // 进度
      uploader.on('uploadProgress', function (file, precent) {
        var per = parseInt(precent * 100)
        document.querySelector('#progress').style['width'] = per + '%'
        $('#ctlBtn').text('上传中 ' + per + '%')
      })
      
      // 上传成功 
      uploader.on('uploadSuccess', function (file, res) {
        // 上传完成后回调数据
        uploadSuccessCallback(res)
        // 上传完成后设置
        uploader.reset()
        $('#ctlBtn').fadeOut(10)
        $('#ctlBtn').text('上传成功')
        $('#' + file.id).append('<em>上传成功</em>')
        setTimeout(function () {
          $('#ctlBtn').text('开始上传')
          bindUpload()
        }, 1500);
      })
      
      // bind uploadr
      bindUpload()
      
    </script>
  </body>
</html>